<template>
  <div class="container">
    <!-- <div
      id="shade"
      :style="{
        width: viewWidth,
        height: viewHeight,
      }"
    ></div> -->
    <div id="pdf-content"></div>
  </div>
</template>

<script setup name="PDF">
import { VuePdf,createLoadingTask } from 'vue3-pdfjs/esm'
import pdf from 'pdfobject'
const { proxy } = getCurrentInstance()
const props = defineProps({
  pdfUrl: {
    type: String,
    default: '',
  },
})

const options = reactive({
  pdfOpenParams: {
    // pagemode: 'none',
    toolbar: 0,
    // navpanes: 0,
    // statesbar: 0,
    // view: 'FitV,left',
    zoom: 150,
  },
})

// let viewWidth = ref('')
// let viewHeight = ref('')

onMounted(() => {
  console.log(VuePdf);
  console.log(333333);
  if (pdf.supportsPDFs) {
    proxy.$nextTick(function () {
      pdf.embed(props.pdfUrl, '#pdf-content', options)
    })
  } else {
    document
      .getElementById('pdf-content')
      .innerHTML(
        '您的浏览器不支持在线预览PDF文件，请使用最新版的谷歌浏览器或者下载后进行查看'
      )
  }
  // const pdfContent = document.getElementById('pdf-content')
  // viewWidth.value = pdfContent.offsetWidth + 'px'
  // viewHeight.value = pdfContent.offsetHeight + 'px'
  // const shade = document.getElementById('shade')
  // shade.oncontextmenu = function (e) {
  //   return false
  // }
})
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  height: 100%;
  overflow: hidden;
  // #shade {
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   opacity: 0;
  // }
}
#pdf-content {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #999;
}
</style>
